<template>
  <div class="life">
     <van-nav-bar left-arrow title="生活服务">
       <template #left>
        <van-icon name="location-o" size="18" color="#fff5f6" />
      </template>
      <template #right>
        <van-icon name="chat-o" size="18" color="#fff5f6" />
      </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000">
    <van-swipe-item v-for="(item, index) in images" :key="index">
      <van-image :src="item"/>
    </van-swipe-item>
    </van-swipe>
    <div class="title" style="padding-top: 10px; margin-left: 5px;font-size: 16px;">生活缴费</div>
    <van-grid :column-num="4" :border="false">
       <van-grid-item>
        <img src="../../assets/life/04.png" alt="" />
        <span>水费</span>
      </van-grid-item>
       <van-grid-item @click="goElectric">
        <img src="../../assets/life/01.png" alt=""/>
        <span>电费</span>
      </van-grid-item>
       <van-grid-item @click="goInist">
        <img src="../../assets/life/02.png" alt="" />
        <span>宽带</span>
      </van-grid-item>
       <van-grid-item @click="goMore">
        <img src="../../assets/life/03.png" alt="" />
        <span>更多</span>
      </van-grid-item>
    </van-grid>
    <div class="item" style="height: 2rem;">
      <div @click="goClean">
        <img src="../../assets/life/08.png" alt="" />
        <span>保洁</span>
      </div>
      <div @click="goMove">
        <img src="../../assets/life/06.png" alt="" />
        <span>搬家</span>
      </div>
      <div @click="goRepair">
        <img src="../../assets/life/11.png" alt="" />
        <span>家修</span>
      </div>
    </div>
    <div class="title" style="padding-top: 10px;display: inline-block; margin-left: 5px;font-size:16px;">热门推荐</div>
    <span style="margin-left:10px; font-size: 12px;">为你提供最优质的服务，享受每一天</span>
    <div class="nav_1">
        <div @click="goNeat">
        <img src="../../assets/life/12.png" alt="" />
        <span>日常保洁</span>
        </div>
        <div @click="goTidy">
        <img src="../../assets/life/10.png" alt="" />
        <span>除螨保洁</span>
        </div>
    </div>
    <div class="nav_2">
        <div @click="goMove">
        <img src="../../assets/life/13.png" alt="" />
        <span>宜居搬家</span>
        </div>
        <div @click="goPay">
        <img src="../../assets/life/09.png" alt="" />
        <span>充值卡优惠</span>
        </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer.vue'
export default {
  data() {
    return {
      images: [
        'https://img2.baidu.com/it/u=1472699721,470268487&fm=26&fmt=auto',
        'https://img2.baidu.com/it/u=574512242,2861685610&fm=26&fmt=auto'
      ],
    };
  },
  components:{
    Footer
  },
  methods:{
    goElectric(){
      this.$router.push({path: "/electric"})
    },
    goInist(){
      this.$router.push({path: "/institution"})
    },
    goMore(){
      this.$router.push({path: "/more"})
    },
    goClean(){
      this.$router.push({path: "/clean"})
    },
    goMove(){
      this.$router.push({path: "/move"})
    },
    goRepair(){
      this.$router.push({path: "/repair"})
    },
    goNeat(){
      this.$router.push({path: "/neat"})
    },
    goTidy(){
      this.$router.push({path: "/tidy"})
    },
    goPay(){
      this.$router.push({path: "/pay"})
    }
  },
  created() {
    this.$store.commit('setNum', 2)
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #ff5555;
  
}
/deep/.van-nav-bar__title{
  color: #f5f5f5;
}
.van-swipe{
  padding: 0;
  .van-swipe-item{
    padding: 0;
    .van-image{
          width:100%;
          height: 364px;
    }
  }
}
.van-grid{
  .van-grid-item{
    img{
      height: 60px;
    }
    span{
      font-size: 20px;
    }
  }
}
.item{
    display: flex;
    flex: 1;
    justify-content: space-around;
    width: 100%;
    margin-top: 5px;
    div{
      width: 100%;
      position: relative;
      margin: 0 20px;
      img{
        width: 100%;
        height: 100%;
      }
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        color: #ecebea;
        font-size:30px;
      }
    }
    }
.nav_1,
.nav_2{
  display: flex;
    flex: 1;
    justify-content: space-around;
    width: 100%;
    height: 2rem;
    margin-top: 5px;
    div{
      width: 100%;
      height: 100%;
      position: relative;
      margin: 10px 10px;
      img{
        width: 100%;
        height: 100%;
      }
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        color: #ecebea;
        font-size:30px;
      }
    }
}
</style>>